<template>
  <div class="register">
    <avue-form ref="form" v-model="form" :option="option" @submit="handleSubmit">
         <template slot-scope="scope" slot="menuForm">
            <el-button @click="login">直接登录</el-button>
        </template>
    </avue-form>
  </div>
</template>
<script>
  import { register } from "@/api/base"
  export default {
    name: "register",
    data () {
      const regPass = new RegExp(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/);
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('密码不能为空'));
        }
        // var reg = new RegExp(/^[a-zA-Z0-9]{8,20}$/);
        if (regPass.test(value)) {
          callback();
        } else {
          return callback(new Error('密码规则为8到20位字母与数字组合'));
        }
      };
      const valiacc = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {
          var length = value.length
          var ac = /^[a-z0-9]+$/
          if (length < 6 || !ac.test(value)) {
            callback(new Error('不少于6位小写字母数字'));
          } else{
            callback();
          }
        }
      };
      const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        form: {},
        option: {
          submitText: '注册',emptyBtn:false,
          column: [
            // {
            //   label: '账号类型',prop: 'parkCompanyType',
            //   type: "radio",
            //   dicData: [
            //     {label: "园区",value: 1},
            //     //企业暂时屏蔽掉
            //     // {label: "企业",value: 2},
            //   ],
            //   rules: [{required: true,message: "请输入",trigger: "blur"}]
            // },
            {
              label: '账号',prop: 'account',tip:"不少于6位小写字母数字",
              rules: [{required: true,validator: valiacc,trigger: "blur"}]
            },
            {
              label: '密码',prop: 'password',type:"password",tip:"8到20位字母与数字组合",
              rules: [{required: true, validator: validatePass, trigger: 'blur'}]
            },
            {
              label: '确认密码',prop: 'repassword',type:"password",
              rules: [{required: true, validator: validatePass2, trigger: 'blur'}]
            },
            // {
            //   label: '邀请码',prop: 'registerCode',
            //   rules: [{required: true,message: "请输入",trigger: "blur"}]
            // },
            {
              label: '手机号',prop: 'phone',
              rules: [{required: true,message: "请输入",trigger: "blur"}]
            },
            // {
            //   label: '职位',prop: 'position',
            //   rules: [{required: true,message: "请输入",trigger: "blur"}]
            // },
            {
              label: '姓名',prop: 'userName',
              rules: [{required: true,message: "请输入",trigger: "blur"}]
            },
            // {
            //   label: '申报年份',prop: 'year',
            //   rules: [{required: true,message: "请输入",trigger: "blur"}]
            // },
            // {
            //   label: '园区/企业名称',prop: 'parkCompanyName',span:24,
            //   rules: [{required: true,message: "请输入",trigger: "blur"}]
            // },
            // {
            //   label: '详细地址',prop: 'addressDetail',
            //   rules: [{required: true,message: "请输入",trigger: "blur"}]
            // },
           
            
            // {
            //   label: '申报类型',prop: 'parkType',display:true,
            //   type: "radio",
            //   dicData: [
            //     {label: "综合类",value: 1},
            //     {label: "数字产业化类",value: 2},
            //     {label: "产业数字化类",value: 3},
            //   ],
            //   rules: [{required: true,message: "请输入",trigger: "blur"}]
            // },
            // {
            //   label: '单位公章全称',prop: 'parkAllName',display:true,
            //   rules: [{required: true,message: "请输入",trigger: "blur"}]
            // },
            // {
            //   label: '所在行业',prop: 'industry',display:true,
            //   rules: [{required: true,message: "请输入",trigger: "blur"}]
            // },
            // {
            //   label: '所在园区',prop: 'park',display:true,
            //   rules: [{required: true,message: "请输入",trigger: "blur"}]
            // },
          ]
        },
      }
    },
    created() {},
    mounted() {},
    watch: {
      'form.parkCompanyType'(){
        let display1=this.form.parkCompanyType==1;
        let display2=this.form.parkCompanyType==2;
        // let parkType =this.findObject(this.option.column,'parkType');
        // parkType.display=display1;
        // let parkAllName =this.findObject(this.option.column,'parkAllName');
        // parkAllName.display=display1;
        
        // let industry =this.findObject(this.option.column,'industry');
        // industry.display=display2;

        // let park =this.findObject(this.option.column,'park');
        // park.display=display2;

        let parkCompanyName =this.findObject(this.option.column,'parkCompanyName');
        if(display1){
          parkCompanyName.label='园区名称';
        }else if(display2){
          parkCompanyName.label='企业名称';
        }else{
          parkCompanyName.label='名称';
        }
        
        

      }
    },
    methods: {
      handleSubmit(form, done) {
        let _this=this;
        register(form).then(res =>{
          done();
          if (res.data.success) {
            _this.$alert('恭喜您注册成功，请登录', {
              confirmButtonText: '确定',
              showClose: false,closeOnPressEscape: false,closeOnClickModal: false,
              callback: action => {
                if (action == 'confirm') { 
                  _this.login()
                }
              }
            })
          }
        },
        () => { done(); } // 失败
        )
      },
      login: function () {
        // this.$router.push({ path: "/login" });
        this.$parent.isShow = true
      },
    }
  };
</script>

<style lang="scss">
  .register .el-input {
    // width: 90%;
  }

  .register .register-submit {
    text-align: center;
    width: 80%;
    height: 40px;
    letter-spacing: 2px;
    cursor: pointer;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    background: linear-gradient(160deg, #0b9e9e 20%, #1dbbbb 80%);
    border: 0;
    font-size: 18px;
    border-radius: 20px;
  }
  .el-form-item{
    margin-bottom: 15px;
  }
</style>
